<template>
	<view class="content">
		
		<view class="topLogo">
			<image src="https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/logo.png" mode="aspectFit" class="logoImg">
			</image>
			
		</view>
		<view class="block">
			日记~注册
		</view>
		<view class="vessel">
			<input class="uni-input" placeholder="邮箱"  @blur="getEmail" inputmode="email"/>
			<input class="uni-input" placeholder="用户名"  @blur="getUserName"/>
			<input class="uni-input" placeholder="密码" type="password" @input="getPassWord"/>
			<input class="uni-input" placeholder="确认密码" type="password" @input="isPwd"/>
			
		</view>
		<view class="block">
			
		</view>
		<view class="block">
			<view class="isSurePwd">
				<text  v-if="isSure">两次密码不一致</text>
			</view>
			<text>我已阅读并同《用户协议》和《隐私协议》</text>
		</view>
		<button type="primary" :disabled="isDisabled" @click="open">注册</button>
		
		
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="veifyPopup" type="dialog">
				<uni-popup-dialog 
					ref="inputClose"  
					mode="input" 
					title="验证码已发送至邮箱" 
					placeholder="请输入邮箱验证码" 
					@confirm="dialogInputConfirm"
				>
				
				</uni-popup-dialog>
			</uni-popup>
		</view>
		<view>
				<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog 
					type="info" 
					cancelText="关闭" 
					confirmText="同意" 
					title="通知" 
					:content="dialogContent" 
					@close="dialogClose">
				</uni-popup-dialog>
			</uni-popup>
			</view>
	</view>
</template>

<script>
	import utis from '@/utils/formatDetection.js'
	import {register,isExitEmail} from '@/api/user.js'
	import {sendEmilVeify} from '@/api/email.js'
	export default {
		data() {
			return {
				email:"",
				password:"",
				isPassword:"",
				isSure:false,
				isDisabled:true,
				isEmail:false,
				defaultImg:"https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/titleImg/default/default.png",
				key:"",
				username:"",
				dialogContent:""
			};
		},
		methods:{
			// 获取用户名
			getUserName(event){
				this.username = event.detail.value
			},
			// 检查邮箱格式
			getEmail(event){
				this.email = event.detail.value
				this.isEmail = utis.checkEmail(this.email)
			},
			// 判断两次密码是否一样
			getPassWord(event){
				this.password = event.detail.value
				if(this.password == this.isPassword){
					this.isSure=false
					this.isDisabled = false
				}else{
					this.isSure=true
					this.isDisabled= true
				}
			},
			// 判断两次密码是否一样
			isPwd(event){
				this.isPassword = event.detail.value
				
				if(this.password == this.isPassword&&this.password!=null&&this.isPassword!=null){
					this.isSure=false
					this.isDisabled = false
				}else{
					this.isSure=true
					this.isDisabled= true
				}
			},
			open() {
				if(this.isEmail){
					this.sendEmail()
					
				}else{
					this.dialogContent = "请输入正确的邮箱格式"
					this.$refs.alertDialog.open()
				}
				
			},
			close() {
				this.$refs.veifyPopup.close()
			},
			dialogInputConfirm(e){
				console.log(this.verify)
				register({
					"password":this.password,
					"email":this.email,
					"imgUrl":this.defaultImg,
					"verify":e,
					"username":this.username,
					"key":this.key
				}).then(res=>{
					this.close()
					if(res.data.code!=200){
						this.dialogContent = "创建失败~请重新发送验证码"
						this.$refs.alertDialog.open()
					}else{
						this.dialogContent = "创建成功"
						this.$refs.alertDialog.open()
						uni.setStorageSync("username",this.username);
						setTimeout(function(){
							uni.navigateTo({
								url:"/pages/user/login"
							})
						},2000)
					}
				})
				
			},
			dialogClose(e){
				console.log(e)
			},
			sendEmail(){
				isExitEmail({
					"email":this.email
				}).then(res=>{
					if(res.data.data>0){
						this.dialogContent = "邮箱已存在，请更换邮箱"
						this.$refs.alertDialog.open()
					}else{
						uni.showLoading({
							title: '邮件发送中'
						});
						sendEmilVeify({
							email:this.email,
							opt:"register"
						}).then(res=>{
							if(res.data.data!=null){
								uni.hideLoading();
								this.$refs.veifyPopup.open('center')
								this.key = res.data.data
							}else{
								uni.hideLoading();
								this.dialogContent = "发送失败，请检测邮箱是否可用"
								this.$refs.alertDialog.open()
								
							}
							console.log(res)
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
			background-color: $bg-blue;
		}
		.content{
			.topLogo{
				width: 100%;
				height: 35vh;
				position: relative;
				.logoImg{
					width: 15vh;
					height: 15vh	;
					position: absolute;  /* 让图片绝对定位 */  
					bottom: 0;  /* 将图片定位到 `.topLogo` 的底部 */  
					left: 50%;  /* 将图片在水平方向上居中 */  
					transform: translateX(-50%);  /* 在水平方向上移动图片，使其完全居中 */ 
					opacity: 0.7;
				}
			}
			.block{
				width: 100%;
				height: 7vh;
				text-align: center;
				font-size: 2.4vh;
				color: white;
				text{
					font-size: 1.4vh;
				}
				.isSurePwd{
					margin-top: 2vh;
					color: red;
					
				}
			}
			.vessel{
				width: 100%;
				height: 18vh;
				
				.uni-input{
					background-color: white;
					width: 70%;
					height: 4vh;
					border-radius: 7rpx;
					margin: auto;
					margin-bottom: 2vh;
					text-align: center;
					color: $bg-gary;
					color: black;
				}
				
				
			}
			button{
				width: 70%;
				opacity: 1;
				
				font-size: 1.8vh;
				background-color: #559dcf;
				margin-top: 5vh;
			}
			
			
		}
</style>
